/* Copyright 2014 The Chromium Authors. All rights reserved.
   Use of this source code is governed by a BSD-style license that can be
   found in the LICENSE file. */

body {
  --avatar-stroke-color: var(--google-gray-50);
  --custodian-name-color: #333333;
  --custodian-email-color: #5f6368;
  --focused-details-button-border: rgba(26, 115, 232, 0.4);
  --header-color: var(--google-gray-900);
  --paragraph-color: var(--google-gray-700);
  font-family: "Roboto", sans-serif;
  padding: 24px 24px 20px 24px;
}

button {
  background: var(--primary-button-fill-color);
  border: 0;
  border-radius: 4px;
  box-sizing: border-box;
  color: var(--primary-button-text-color);
  cursor: pointer;
  font-size: 14px;
  line-height: 16pt;
  margin: 0;
  padding: 8px 16px;
  transition: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
}

button:active {
  background: var(--primary-button-fill-color-active);
}

[dir='rtl'] button {
  float: left;
}

#details {
  margin-top: 32px;
}

#details-header {
  font-weight: bold;
}

.details-button {
  background: var(--quiet-background-color);
  border: 1px solid var(--google-gray-500);
  color: var(--google-gray-700);
  float: none;
}

.details-button:hover {
  background: var(--google-gray-50);
  border-color: var(--google-gray-600);
}

.details-button:active {
  background: var(--google-gray-50);
  box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3),
              0 2px 6px 2px rgba(60, 64, 67, 0.15);
}

.details-button:focus {
  background: var(--google-gray-50);
  border-color: var(--focused-details-button-border);
}

h1,
p,
.custodian-contact {
  letter-spacing: -0.35px;
}

h1 {
  color: var(--header-color);
  font-size: 24px;
  font-weight: normal;
  margin: 0 0 16px;
}

html {
  -webkit-text-size-adjust: 100%;
  font-size: 125%;
}

p {
  color: var(--paragraph-color);
  font-size: 15px;
  margin-bottom: 0;
}

.message-container {
  display: flex;
  flex-direction: column;
}

.icon {
  overflow: visible;
}

#family-link-kite {
  content: -webkit-image-set(
      url(../../resources/supervised_user_icon.png) 1x);
  height: 72px;
  width: 72px;
}

#illustration {
  display: none;
}

.frame-blocked {
  box-sizing: border-box;
  margin: 100px auto 0;
  max-width: 600px;
  min-width: 280px;
  overflow: visible;
  width: 100%;
}

#main-message {
  margin-top: 36px;
}

.button-container {
  margin-top: 40px;
}

.remote-approvals-button {
  float: right;
}

.go-back-button {
  float: left;
}

#custodians-information {
  margin-top: 16px;
}

.custodian-information {
  clear: both;
  margin-top: 8px;
}

.avatar-img {
  border: 1px solid var(--avatar-stroke-color);
  border-radius: 50%;
  content: -webkit-image-set(
      url(default_100_percent/logo_avatar_circle_blue_color.png) 1x,
      url(default_200_percent/logo_avatar_circle_blue_color.png) 2x);
  float: left;
  height: 40px;
  margin-right: 11px;
  user-select: none;
  width: 40px;
}

.custodian-contact {
  display: flex;
  flex-direction: column;
  height: 40px;
  overflow: visible;
}

.custodian-name {
  color: var(--custodian-name-color);
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 4px;
}

.custodian-email {
  color: var(--custodian-email-color);
  display: flex;
  flex-direction: column;
  font-size: 15px;
  height: 100%;
  justify-content: center;
}

#details {
  margin-top: 32px;
}

#details-header {
  font-weight: bold;
}

/* Styles for when the web filter interstitial refresh flag is enabled. */
.interstitial-refresh-enabled button {
  font-size: 13px;
  font-weight: 500;
  height: 32px;
  line-height: normal;
  padding: 6px 16px;
}

.interstitial-refresh-enabled .secondary-button {
  background: var(--background-color);
  border: 1px solid var(--google-gray-300);
  color: var(--google-blue-600);
}

.interstitial-refresh-enabled .secondary-button:active {
  background: var(--secondary-button-hover-fill-color);
}

.interstitial-refresh-enabled h1 {
  font-family: "Google Sans", sans-serif;
}

.interstitial-refresh-enabled p {
  color: var(--paragraph-color);
  font-size: 14px;
}

.interstitial-refresh-enabled .icon {
  display: none;
}

picture {
  margin: auto;
}

.interstitial-refresh-enabled #illustration {
  display: inline;
}

.interstitial-refresh-enabled .frame-blocked {
  display: flex;
  flex-direction: column;
  margin-top: 50px;
  max-width: 432px;
}

.interstitial-refresh-enabled .go-back-button {
  float: right;
  margin-left: 24px;
}

.interstitial-refresh-enabled #custodians-information {
  margin-top: 0;
}

.interstitial-refresh-enabled .custodian-information {
  margin-top: 24px;
}

.interstitial-refresh-enabled .avatar-img {
  border: none;
}

.interstitial-refresh-enabled .custodian-name {
  display: none;
}

.interstitial-refresh-enabled .custodian-email {
  font-size: 13px;
}

/* Local approvals button is only shown when the local web approvals flag
is enabled. */
.local-approvals-button {
  float: right;
  margin-left: 24px;
}

.local-approvals-button:active {
  background: var(--primary-button-fill-color-active);
}

@media (prefers-color-scheme: dark) {
  body.supervised-user-block {
    --avatar-stroke-color: var(--google-blue-100);
    --custodian-email-color: var(--google-gray-500);
    --custodian-name-color: var(--google-gray-500);
  }

  body.supervised-user-block.interstitial-refresh-enabled {
    --header-color: #e9eaed;
    --paragraph-color: var(--google-gray-500);
  }

  .interstitial-refresh-enabled .remote-approvals-button {
    color: var(--google-blue-300);
    border-color: var(--secondary-button-border-color);
  }
}

/* If the height is smaller than min-height, set top and bottom
margin to 0. This will be useful for subframes. */
@media (max-height: 315px) {
  .frame-blocked {
    margin-top: 0;
  }
}

@media (max-width: 420px) {
  button,
  [dir='rtl'] button,
  .small-link {
    float: none;
    width: 100%;
  }

  .details-button {
    margin-top: 20px;
  }
}

/* Narrow width styles when the web filter interstitial refresh flag is
enabled. */
@media (max-width: 480px) {
  .interstitial-refresh-enabled {
    padding: 0;
    margin: auto;
  }

  .interstitial-refresh-enabled button,
  .interstitial-refresh-enabled [dir='rtl'] button {
    width: initial;
  }

  .interstitial-refresh-enabled button {
    margin: 0 4px 16px 4px;
  }

  .interstitial-refresh-enabled #illustration{
    display: none;
  }

  .interstitial-refresh-enabled .frame-blocked {
    align-items: center;
    background-color: rgba(232, 234, 237, .38);;
    border-radius: 12px;
    padding: 0 8px;
    width: 284px;
  }

  .interstitial-refresh-enabled .message-container {
    align-items: center;
  }

  .interstitial-refresh-enabled #main-message {
    margin-top: 32px;
    text-align: center;
  }

  .interstitial-refresh-enabled #custodians-information {
    margin-top: 8px;
  }

  .interstitial-refresh-enabled .custodian-information {
    margin-top: 8px;
  }

  .interstitial-refresh-enabled .custodian-contact {
    height: 24px;
  }

  .interstitial-refresh-enabled .avatar-img {
    height: 24px;
    width: 24px;
  }

  .interstitial-refresh-enabled .button-container {
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    justify-content: center;
    margin: 24px 0 16px;
  }

  .interstitial-refresh-enabled .go-back-button {
    margin-left: 4px;
  }
}

@media (prefers-color-scheme: dark) and (max-width: 480px) {
  .interstitial-refresh-enabled .frame-blocked {
    background-color: initial;
  }
}